<template>
  <div>
    <DetailItem
    :id="detail.id"
    :title="detail.title"
    :image="detail.image"
    :price="detail.price"
    />
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button color="#be99ff" type="warning" text="加入购物车"
        @click="addToCart(detail)"
      />
      <router-link class="buy-now" to="/cart">
        <van-goods-action-button color="#7232dd" type="danger" text="立即购买"
          @click="buyNow(detail)"
        />
      </router-link>
    </van-goods-action>
  </div>
</template>

<script>
import DetailItem from '@/components/DtDetailItem'
import { createNamespacedHelpers } from 'vuex'

const cart = createNamespacedHelpers('cart')
export default {
  name: 'detail',
  components: {
    DetailItem
  },
  data () {
    return {
      detail: {},
      test: {
        id: 1,
        name: 'wwww'
      }
    }
  },
  created () {
    this.$http.getDetail(this.$route.query.id)
      .then(resp => {
        // console.log(resp.detail)
        const {
          id,
          title,
          image,
          price
        } = resp.detail
        this.detail = { id, title, image, price }
      })
  },
  methods: {
    ...cart.mapMutations(['addToCart', 'buyNow'])
  }
}
</script>

<style lang="scss" scoped>
.buy-now {
  width: 36%;
}
</style>
